原生支持的懒加载已经到来！

资料来源：https://medium.com/bbc-design...

title： Native lazy loading has arrived!

author: Andy Potts (BBC 软件工程师)

date: 2019-08-12

对于从未看到过原生懒加载这个术语的人：

谷歌上周发布了 Google introduced native lazy loading to Chrome version 76

现在你可能会想知道：“什么是原生懒加载，它是否值得添加到我的网站上？”

好的，这正是我希望为你解答的问题，因为我会谈谈我使用它的经验。

什么是懒加载？

懒加载是指通过在用户需要时加载资源（例如图像资源）来提高性能。举个例子，当用户访问你的网站的时候，它会在进入视图的时候（就是在用户可以看见的时候）加载当前视图所需要的图像，而不是在页面最初加载所有图像。这是很有好处的，因为用户不需要总是看在页面底部的图像，所以为什么要让我们的用户加载所有不必要的图像呢？

以前，如果我们想要实现懒加载，我们必须导入一个库或编写一些 JavaScript 来检查元素相对于用户视图的位置，必要时（就是用户移动到对应位置的时候）再加载对应的资源。听起来实现起来有一点复杂，不是吗？

原生懒加载是 Google 浏览器新的内置解决方案，这意味着不需要编写额外的 JavaScript 来实现懒加载（并且极大地提高了网站的性能）。原生懒加载使用起来十分简单，只需要通过添加loading属性到 <image>或 iframe 标签上就可以实现。

听起来很不错，不是吗？但它实际上值得实施吗？

我决定在BBC的一个内部产品上实现原生懒加载技术，这个网站每天有大约 3,000 名活跃用户。这个网站上涉及一个最常见的操作——查询，该查询将呈现一个最多100个图像的列表 -——我认为这似乎是尝试原生懒加载的理想场所。

所以，它值得添加到我们的网站上吗？是的！将loading属性添加到图像上会使图像在一个快速的网络连接环境上的加载时间减少约 50％ —— 从约 1 秒到 <0.5 秒，以及最多可以向服务器保存 40 个请求?。所有的·这些性能增强只是将一个属性添加到一堆图像中！

实例

所以，现在我们已经看到了它能够做什么， 让我们来看看它是如何工作的。我将介绍如何为图像实现原生的懒加载。

这真的非常容易 —— 把loading属性，值为lazy加在image标签上，这就能告诉浏览器去懒加载这张图片，并且指定图片的宽高能够避免页面的重排。

<img src="/images/example.png" loading="lazy" width="400" height="400" />

（因为 SF 不能显示 iframe 所以这里放链接）

https://codepen.io/andypotts/...

总而言之，使用原生懒加载是为您的用户提供真正的渐进式性能增强的最简单方法之一。这不是一个完美的解决方案，但如果你还没有使用延迟加载并拥有大量图像/ iframe，那么它绝对值得尝试 - 特别是因为它很容易实现！

不幸的是，原生懒加载不是一颗银色子弹（这个比喻我很疑惑，之前看柯南剧场版也有提到，百度了一下大概是用来比喻为具有极端有效性的解决方法，作为杀手锏、最强杀招、王牌等的代称）。由于原生懒加载是一个新的浏览器功能，目前缺乏浏览器支持，因此必须用 polyfill 或后备JavaScript 解决方案以支持其他浏览器。您可以在 browsers that support native lazy loading on caniuse.com 查看更多的细节。（可以看到兼容性很差了，还是老老实实写 JS 判断吧 233）

还值得注意的是，无法使用原生懒加载来加载背景图像，因此如果您使用了很多背景图像，那么您可能需要考虑使用 JavaScript 替代方法来实现懒加载背景图像了。

Have fun lazy loading!